<template>
	<view class="detail">
		<headertop title="详情" str="orderlist" str1="oridei" back1="#fff"></headertop>
		<view class=""
			:style="{'margin-top':statusBarHeight+'px','width':'100%','height':barHeight+'px','box-shadow': '0rpx 4rpx 8rpx 0rpx rgba(0,0,0,0.05)'}">
		</view>
		<view class="centercontent">
			<view class="t1">
				{{contentobj['title']}}
			</view>

			<view class="t3">
				<view class="leftdate">
					{{contentobj.createtime}}
				</view>

			</view>
		</view>
		<view class="bottomContent">
			<view class="center">
				<up-parse :content="contentobj['content']"></up-parse>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onPageScroll,
		onLoad,
		onShow,
		onReachBottom
	} from "@dcloudio/uni-app";
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	import headertop from '@/components/header.vue'
	import {
		_static
	} from '@/ulm/utils/url.js'
	const statusBarHeight = ref('')
	const contentobj = ref({})
	const barHeight = ref('')
	const flag = ref(false)
	const back1 = ref('')
	import {
		$api
	} from '../../ulm';
	onLoad((opt) => {
		init(opt.id)
	})
	function padStart(n) {
		return n.toString().padStart(2, 0)
	}
	async function init(id) {
		const res = await $api.pollenDetail({
			id
		})
		if (res.code == 1) {
			contentobj.value = res.data
		}
	}
	const formattedDate = (timestamp) => {
		const date = new Date(timestamp)
		const year = date.getFullYear()
		const month = padStart(date.getMonth() + 1)
		const day = padStart(date.getDate())
		return `${year}-${month}-${day}`
	}
	// 创建响应式数据  
	const content = ref(`  
	`);
	onMounted(() => {
		statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight
		const {
			top,
			height
		} = wx.getMenuButtonBoundingClientRect();
		barHeight.value = height ? height + (top - statusBarHeight.value) * 2 : 38;
	})
	onPageScroll((e) => {

		if (e.scrollTop > 100) {
			back1.value = '#81D6FF'
		} else {
			back1.value = ''
		}

	})
</script>
<style lang="scss">
	page {
		background: #F7F8FA;
	}

	.detail {
		width: 100%;
		overflow: hidden;

		.bottomContent {
			width: 100%;
			overflow: hidden;
			box-shadow: 0rpx -4rpx 10rpx 0rpx rgba(0, 0, 0, 0.11);
			border-radius: 48rpx 48rpx 0rpx 0rpx;
			margin-top: 26rpx;
			background: #FFFFFF;

			.center {
				width: 686rpx;
				margin: 32rpx auto;
				overflow: hidden;
			}
		}

		.centercontent {
			width: 686rpx;
			margin: auto;
			margin-top: 32rpx;
			overflow: hidden;

			.t1 {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #1D2129;
			}

			.t3 {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 24rpx;

				.leftdate {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #86909C;
				}

				.liulanl {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #86909C;
				}
			}

			.t2 {
				width: 100%;
				display: flex;
				font-weight: 400;
				font-size: 28rpx;
				color: #4E5969;
				margin-top: 16rpx;

				.zk {
					font-size: 28rpx;
					color: #2AB4F5;
					white-space: nowrap;

					image {
						display: inline-block;
						width: 20rpx;
						height: 20rpx;
					}
				}

				.mshu {
					width: 600rpx;
					white-space: nowrap;
					/* 防止文本换行 */
					overflow: hidden;
					/* 隐藏超出容器的文本 */
					text-overflow: ellipsis;


					/* 显示省略号 */
				}
			}
		}
	}
</style>